<template>
  <view class="container">

      <u-navbar
          :title="'申报列表'"
          :autoBack="false"
          @rightClick="history"
          bgColor="transparent"
          leftIcon=""
          :safeAreaInsetTop="true"
          rightIconColor="#FFFFFF"
          titleStyle="color:#FFFFFF; font-size: 32rpx; font-weight: 600;"
      >
      </u-navbar>
      <view :style="{flex: 1,overflow: 'auto',height:$store.state.heightContentNoTop}"  class="content">
        <view  v-if="list && list.length">
          <u-list>
            <u-list-item
                v-for="(item, index) in list"
                :key="index"
            >
              <u-cell title="" @click="showModal(item)">
                <template slot="title">
                  <span style="color: #a777e3">当前节点：{{item.taskName}}</span>
                  <span>类型：物业事件</span>
                  <span>主题：下水道处理</span>
                  <span>发起时间：{{item.createTime}}</span>
                  <span>持续时间：{{item.duration}}</span>
                  <span>状态：
                    <template v-if="item.comment">
                      <span style="color: green" v-if="item.comment.type=='1'">审核通过</span>
                      <span style="color: red" v-if="item.comment.type=='2'">审核不通过</span>
                      <span style="color: blue" v-if="item.comment.type=='3'">驳回</span>
                    </template>
                    <template v-else>
                      <span style="color: darkred" v-if="item.finishTime">已结束</span>
                      <span style="color: black" v-else>待审核</span>
                    </template>
                  </span>
                  <span v-if="item.finishTime" style="color: darkred">结束时间：{{item.finishTime}}</span>
                </template>
              </u-cell>

            </u-list-item>
            <u-loadmore style="padding: 20rpx;color: #5ac725" color="#6e8efb" fontSize="16" :status="status"  nomore-text="没有更多了" loadmoreText="点击加载更多" @loadmore="loadmore()"/>
          </u-list>
        </view>
        <view v-else>
          <u-empty
              style="margin-top: 130rpx;padding-top: 74rpx;"
              mode="data"
              title="无错题"
              iconUrl="https://cdn.uviewui.com/uview/demo/empty/data.png"
          >
          </u-empty>
        </view>
      </view>

  </view>
</template>

<script>
import Tabbar from "../../tabbar.vue";
import {myProcess,flowRecord} from "@/api/exam/applyList.js";
import UButton from "../../../../uni_modules/uview-ui/components/u-button/u-button.vue";
import UListItem from "../../../../uni_modules/uview-ui/components/u-list-item/u-list-item.vue";
import ULoadingPage from "../../../../uni_modules/uview-ui/components/u-loading-page/u-loading-page.vue";
import UAvatar from "../../../../uni_modules/uview-ui/components/u-avatar/u-avatar.vue";
import UDivider from "../../../../uni_modules/uview-ui/components/u-divider/u-divider.vue";

export default {
  components: {UDivider, UAvatar, ULoadingPage, UListItem, UButton, Tabbar},
  props:{
    query:{}
  },
  data() {
    return {
      list:[],
      status:'loadmore',
      total:0,
      height:0,
      params: {
        pageNum: 1,
        pageSize: 10,
      },
      value:[],
      examTypeList:{},
      item:{},
      show:false,
      itemList:[]
    }
  },
  methods: {
    showModal(item){
      this.item = item
      this.show = true

      flowRecord(item,item.procInsId,item.deployId).then(res=>{
        if (res.code===200){
          this.itemList = res.data.flowList
          this.$root.$emit('getEmitter','/pages/exam/applyListDetail',{itemList:this.itemList})
        }
      }).catch(err=>{

      })

    },
    getList(){
      if (this.status!=='nomore'){
        uni.showLoading({
          title: '正在加载'
        })
        this.status = 'loading';
        myProcess(this.params).then(res=>{
          if (res.code==200){
            if (this.list.length<=0){
              this.list = res.data.records
            }else{
              this.list.push(...res.data.records)
            }
            this.total = res.total
            if (this.list.length>=this.total){
              this.status = 'nomore';
            }else{
              this.status = 'loadmore';
            }
            // uni.$u.props.navbar.height
            uni.getSystemInfo({
              success: (res)=>{
                this.$nextTick(function () {
                  setTimeout(()=>{
                    if (this.$refs && this.$refs.top && this.$refs.wrong){
                      this.height = res.screenHeight - this.$refs.top.$el.clientHeight - this.$refs.wrong.$el.clientHeight
                      this.height = (this.height) + 'px'
                    }
                  },10)
                });
              }
            });
          }
        }).catch(err=>{
        }).finally(res=>{
          uni.hideLoading()
        })
      }
    },
    getTopicType(type){
      for (let i = 0; i < items.length; i++) {
        if (items[i].dictValue==type) return items[i].dictLabel
      }
    },
    wrongSelect(){
      // uni.redirectTo({
      //   url:'/pages/exam/wrongSelect'
      // })
      this.$root.$emit('getEmitter','/pages/exam/wrongSelect')
    },
    history(){
      // uni.redirectTo({
      //   url:'/pages/exam/wrongRecords'
      // })
      this.$root.$emit('getEmitter','/pages/exam/wrongRecords')
    },
    scrolltolower() {
      this.loadmore()
    },
    loadmore() {
      this.params.pageNum++
      this.getList()
    }
  },
  created() {
    this.getList()
    let items = JSON.parse(localStorage.getItem("exam_type"));
    for (let i = 0; i < items.length; i++) {
      this.examTypeList[items[i].dictValue] = items[i].dictLabel
    }
  },
  activated() {
    this.$root.$emit('setBottomVisible',true)
    if (this.query && this.query.activated) this.getList()
  },
}
</script>

<style>
::v-deep .u-navbar__content__right__text{
  color: #FFFFFF;
}
::v-deep.u-button--square{
  border-radius: 0;
}
::v-deep .u-navbar--fixed{
  position: relative;
  clear: both;
}
.rotate-90 {
  transform: rotate(90deg);
}
.startWrap{
  display: flex;
  justify-content: center;
  width: 100%;
  align-items: center;
}
.start{
  background-color: #3c9cff;
  color: white;
  padding: 5rpx 30rpx;
  margin: 30rpx;
  line-height: 70rpx;
  font-size: 30rpx;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

.container {
  background: linear-gradient(135deg, #6e8efb, #a777e3);
  height: 100%;
  font-family: 'Poppins', sans-serif;
  padding: 20rpx;
}
.content {
  margin-top: 80rpx;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 20rpx;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  padding: 10rpx;
  margin: 5rpx;
  margin-bottom: 280rpx;
}
::v-deep .u-modal__content {
  justify-content: flex-start;
}
.u-collapse-content{
  padding: 20rpx;
}
</style>
